<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生信息展示页</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <script src="../jq-module/jquery.particleground.min.js" charset="utf-8"></script>
</head>
<body>

<div style="display:none;width: 400px;height: 400px;margin-top: 50px;" id="stu_form">
    <form class="layui-form" action="" lay-filter="stu_form" >
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="hidden" name="id" required  lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="stuName" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" name="age" required lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="text" name="sex" required lay-verify="required" placeholder="请输入性别" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="address" required lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系方式</label>
            <div class="layui-input-block">
                <input type="text" name="tel" required lay-verify="required" placeholder="请输入联系方式" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            </div>
        </div>
    </form>
</div>


<table class="layui-hide" id="student" lay-filter="student"></table>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="deletes">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>

<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['table','layer' ,'jquery','form'],function(){
        var table = layui.table,
            $ = layui.jquery,
            form = layui.form,
            layer = layui.layer;
        // 渲染表格
        table.render({
             elem: '#student'
            ,url:'/student?method=findAll'
            ,toolbar: '#toolbar'
            ,cols: [[
                 {type: 'checkbox',fixed:'left',width: 100}
                ,{field:'id', title:'学号'}
                ,{field:'stuName', title:'姓名'}
                ,{field:'age', title:'年龄'}
                ,{field:'sex', title:'性别'}
                ,{field:'address', title:'地址'}
                ,{field:'tel', title:'电话'}
                ,{fixed: 'right', title:'操作', toolbar: '#bar', width:150}
            ]]
            ,page: true
        });

        //头工具栏事件
        table.on('toolbar(student)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'deletes':
                    var data = checkStatus.data;
                    var arr =[];
                    for (let i = 0; i < data.length ;i++) {
                        arr.push(data[i].id);
                    }
                    console.log(arr.toString());
                    break;
                case 'add':
                    var data = checkStatus.data;
                    // 使用弹出层 添加学生信息
                    layer.open({
                        title:'添加学生',
                        type: 1,
                        content:$('#stu_form'),
                        area:['450px','500px'],
                        success:function () {
                            //重新渲染表格
                            form.render();
                            form.on('submit(formDemo)', function (data) {
                                data = data.field;
                                if (data.username == '') {
                                    layer.msg('用户名不能为空');
                                    return false;
                                }
                                if (data.password == '') {
                                    layer.msg('密码不能为空');
                                    return false;
                                }
                                if (data.captcha == '') {
                                    layer.msg('验证码不能为空');
                                    return false;
                                }

                                //发送ajax请求
                                $.ajax({
                                    url:'/student?method=add',
                                    data:data,
                                    dataType:'json',
                                    type:'post',
                                    success:function (res) {
                                        if(res.code == 200){
                                            layer.msg(res.msg,{icon:6},function () {
                                                // 第二次添加数据回显
                                                //关闭弹窗
                                                layer.closeAll();
                                            })
                                        }else{
                                            layer.msg(res.msg,{icon:5});
                                        }
                                    },
                                    error:function () {
                                        layer.msg('请求失败');
                                    }
                                })
                                return false;
                            });
                        }
                    });

                    break;
            };
        });



        //监听行工具事件
        table.on('tool(student)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
               console.log(data.id)
                $.ajax({
                    url:'/student?method=delete',
                    data:{id:data.id},
                    dataType:'json',
                    type:'post',
                    success:function (res) {
                        if(res.code == 200){
                            layer.msg(res.msg,{icon:6},function () {
                                window.location.reload();
                            })
                        }else{
                            layer.msg(res.msg,{icon:5});
                        }
                    },
                    error:function () {
                        layer.msg('请求失败');
                    }
                })

            } else if(obj.event === 'edit'){
                //表单的回显
                layer.open({
                    title:'编辑学生',
                    type: 1,
                    content:$('#stu_form'),
                    area:['450px','500px'],
                    success: function(layero, index){
                        console.log(layero, index);
                        //给表单赋值
                        form.val("stu_form", {
                            "id":data.id
                            ,"stuName": data.stuName
                            ,"sex": data.sex
                            ,"tel": data.tel
                            ,"address": data.address
                            ,"age": data.age
                        });

                        form.on('submit(formDemo)', function (data) {
                            data = data.field;
                            if (data.username == '') {
                                layer.msg('用户名不能为空');
                                return false;
                            }
                            if (data.password == '') {
                                layer.msg('密码不能为空');
                                return false;
                            }
                            if (data.captcha == '') {
                                layer.msg('验证码不能为空');
                                return false;
                            }

                            //发送ajax请求
                            $.ajax({
                                url:'/student?method=update',
                                data:data,
                                dataType:'json',
                                type:'post',
                                success:function (res) {
                                    if(res.code == 200){
                                        layer.msg(res.msg,{icon:6},function () {
                                            layer.closeAll();
                                            //重新架子啊窗口 更新信息
                                            window.location.reload();
                                        })
                                    }else{
                                        layer.msg(res.msg,{icon:5});
                                    }
                                },
                                error:function () {
                                    layer.msg('请求失败');
                                }
                            })
                            return false;
                        });

                    }
                });
               console.log(data)
            }
        });
    });
</script>




</body>
</html>
